<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="book" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>云上书屋</title>
	<link rel="icon"href="http://47.100.102.177:8080/app/images/common/云上书屋.png" type="image/x-icon" />
	<link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/swiper-bundle.min.css">
	<link rel="stylesheet" href="http://47.100.102.177:8080/app/css/index/index01-style.css" media="screen" type="text/css" />
	<link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/common/nav.css" />
	<link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/common/foot.css" />
	<script src="http://47.100.102.177:8080/app/js/common/swiper-bundle.min.js"></script>
	<script src="http://47.100.102.177:8080/app/js/common/jquery.min.js"></script>
</head>

<style>
	body {
		width: auto;
		height: auto;
		margin: 0px;
		border: 0;
		/* overflow-x: hidden;*/
		display: block;
	}
	/*logo*/
	.logo-line{
		position: relative;
		top: 40px;
		width: auto;
		height: 85px;
		overflow: hidden;
	}
	.logo{
		width: 220px;
		height: 85px;
		left: 150px;
		position: absolute;
		background-image: url("http://47.100.102.177:8080/app/images/common/logo.png");
		background-size: cover;
	}

	/*搜索框*/
	.search>input{
		width: 600px;
		height: 40px;
		top: 25px;
		border: 1px solid rgb(196,219,102);
		position: absolute;
		left: 460px;
		outline:none;

	}
	.search>button{
		border: 1px solid rgb(196, 219, 102);
		width: 48px;
		height: 42px;
		position: absolute;
		top: 25px;
		left: 1060px;
		background-image: url("http://47.100.102.177:8080/app/images/index/查询.png");
		background-size: 45px;
	}
	.search>button:hover{
		background-color: white;
	}
	.bg-add {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0px;
		background-color: rgba(0, 0, 0, 0.2);
		display: none;
		z-index: 999;
	}

	.inf {
		background-color: white;
		height: 630px;
		width: 45%;
		margin: auto;
		margin-top: 60px;
		border-radius: 3px;
	}

	.inf-head {
		width: 100%;
		height: 30px;
		background-color: rgb(21, 184, 215);
		border-radius: 3px;
	}

	#close-add {
		float: right;
		width: 22px;
		height: 22px;
		margin-right: 5px;
		background-color: red;
		color: white;
		font-weight: 900;
		border-radius: 5px;
		border: 0px;
		margin-top: 3px;
	}

	.inf-from {
		width: 100%;
		height: 600px;
		border-radius: 3px;
		overflow: scroll;
	}

	.mailTable {
		width: 100%;
		border-top: 1px solid #E6EAEE;
		border-left: 1px solid #E6EAEE;
		margin-bottom: 30px;
	}

	.mailTable tr td {
		width: 200px;
		height: 35px;
		line-height: 35px;
		box-sizing: border-box;
		padding: 0 10px;
		border-bottom: 1px solid #E6EAEE;
		border-right: 1px solid #E6EAEE;
	}

	.mailTable tr td.column {
		background-color: #EFF3F6;
		color: #393C3E;
		width: 30%;
	}
</style>
<body>
<div class="contai">
	<!--定义头部-->
	<div class='nav'>
		<ul>
			<li><img src="http://47.100.102.177:8080/app/images/common/素材-大书.png"></li>
			<li><a id="first">主页</a></li>
			<li><a href='#'>分类</a>
				<ul>
					<li><a href='./index01'>图书</a></li>
					<li><a href='./index02'>电子书</a></li>
				</ul>
			</li>
			<book:if test="${user!=null}">
				<li><a href='#'>${user.uname}</a>
					<ul>
						<li><a href='./car/shoppingcar?account=${user.account}'>购物车</a></li>
						<li><a href='./personal/center?status=1'>个人信息</a></li>
						<li><a href='./order/order'>订单信息</a></li>
					</ul>
				</li>
				<li><a href="/boot/users/exit">安全退出</a></li>
			</book:if>
			<li><a href='login'>登陆</a></li>
			<li><a href='login'>注册</a></li>
		</ul>
	</div>
	<!-- /*定义logo和搜索框*/ -->
	<div class="logo-line">
		<div class="logo"></div>
		<div class="search">
			<input id="search" type="text" placeholder="请输入...">
			<button type="button" class="button" onclick="search_Book()"></button>
		</div>
	</div>

	<div class="pic">
		<img src="http://47.100.102.177:8080/app/images/index/1200x65_0906-1630997035.jpg">
	</div>
	<!-- 定义banner begin -->
	<div class="banners">
		<nav>
			<ul>
				<li><img src="http://47.100.102.177:8080/app/images/index/I-文学.svg"><a href="/boot/book/index?bookTypeId=2">文学</a></li>
				<li><img src="http://47.100.102.177:8080/app/images/index/J-艺术.svg"><a href="/boot/book/index?bookTypeId=1">艺术</a></li>
				<li><img src="http://47.100.102.177:8080/app/images/index/G-文化.svg"><a href="/boot/book/index?bookTypeId=3">动漫</a></li>
				<li><img src="http://47.100.102.177:8080/app/images/index/计算机.svg"><a href="/boot/book/index?bookTypeId=9">科技</a></li>
				<li><img src="http://47.100.102.177:8080/app/images/index/想法.svg"><a href="/boot/book/index?bookTypeId=4">经管</a></li>
				<li><img src="http://47.100.102.177:8080/app/images/index/启蒙.svg"><a href="/boot/book/index?bookTypeId=5">童书</a></li>
				<li><img src="http://47.100.102.177:8080/app/images/index/B-哲学宗教.svg"><a href="/boot/book/index?bookTypeId=6">人文</a></li>
				<li><img src="http://47.100.102.177:8080/app/images/index/健康.svg"><a href="/boot/book/index?bookTypeId=7">励志</a></li>
				<li><img src="http://47.100.102.177:8080/app/images/index/生活.svg"><a href="/boot/book/index?bookTypeId=8">生活</a></li>
				<li><img src="http://47.100.102.177:8080/app/images/index/C-社会.svg"><a href="/boot/book/index?bookTypeId=10">社会</a></li>
			</ul>
		</nav>
		<!-- 轮播图 -->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="http://47.100.102.177:8080/app/images/index/750x315-1629688493.jpg"></div>
				<div class="swiper-slide"><img src="http://47.100.102.177:8080/app/images/index/750x315-1630996532.jpg"></div>
				<div class="swiper-slide"><img src="http://47.100.102.177:8080/app/images/index/2021090914183116115.jpg"></div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

			<!-- 如果需要滚动条 -->
			<div class="swiper-scrollbar"></div>
		</div>
		<DIV id="cntR">
			<DIV id="NewsTop">
				<DIV id="NewsTop_tit">
					<P class="topTit">热门书摘</P>
					<P class="topC0">文学</P>
					<P class="topC0">青春</P>
					<P class="topC0">经典</P>
				</DIV>
				<DIV id="NewsTop_cnt"> <SPAN title="Don't delete me"></SPAN> <SPAN>
								<div target=_self>&nbsp;&nbsp;&nbsp;&nbsp;${digests1[0].contents}</div>
								<div target=_self>&nbsp;&nbsp;&nbsp;&nbsp;${digests1[1].contents}</div>
								<div target=_self>&nbsp;&nbsp;&nbsp;&nbsp;${digests1[2].contents}</div>
							</SPAN> <SPAN><div target=_self>&nbsp;&nbsp;&nbsp;&nbsp;${digests2[0].contents}</div>
								<div target=_self>&nbsp;&nbsp;&nbsp;&nbsp;${digests2[1].contents}</div>
								<div target=_self>&nbsp;&nbsp;&nbsp;&nbsp;${digests2[2].contents}</div>
							</SPAN> <SPAN> <div target=_self>&nbsp;&nbsp;&nbsp;&nbsp;${digests3[0].contents}</div>
								<div target=_self>&nbsp;&nbsp;&nbsp;&nbsp;${digests3[1].contents}</div>
								<div target=_self>&nbsp;&nbsp;&nbsp;&nbsp;${digests3[2].contents}</div>
							</SPAN> </DIV>
			</DIV>
		</DIV>
		<div class="book-new">
			<div class="new-title">
				<h2>公告</h2>
			</div>
			<ul>
				<li><a href="#" id="0" onclick="lookmsg(this)">${announcements[0].announcementTitle}</a></li>
				<li><a href="#" id="1" onclick="lookmsg(this)">${announcements[1].announcementTitle}</a></li>
				<li><a href="#" id="2" onclick="lookmsg(this)">${announcements[2].announcementTitle}</a></li>
				<li><a href="#" id="3" onclick="lookmsg(this)">${announcements[3].announcementTitle}</a></li>
			</ul>
		</div>
	</div>
	<div class="container">
		<div class="content">
			<ul class="ca-menu">
				<li> <a href="/boot/book/index?bookTypeId=1"> <span class="ca-icon">Y</span>
					<div class="ca-content">
						<img class="ca-sub" src="http://47.100.102.177:8080/app/images/index/68d578ba59c236b6.png.webp">
					</div>
				</a> </li>
				<li> <a href="/boot/book/index?bookTypeId=3"> <span class="ca-icon">S</span>
					<div class="ca-content">
						<img class="ca-sub" src="http://47.100.102.177:8080/app/images/index/787826547b9a2358.png.webp">
					</div>
				</a> </li>
				<li> <a href="/boot/book/index?bookTypeId=2"> <span class="ca-icon">S</span>
					<div class="ca-content">
						<img class="ca-sub" src="http://47.100.102.177:8080/app/images/index/fbb346ee93b77cd3.png.webp">
					</div>
				</a> </li>
				<li> <a href="/boot/book/index?bookTypeId=10"> <span class="ca-icon">W</span>
					<div class="ca-content">
						<img class="ca-sub" src="http://47.100.102.177:8080/app/images/index/bb7c9501d6cc184b.png.webp">
					</div>
				</a> </li>
				<li> <a href="/boot/book/index?bookTypeId=9"> <span class="ca-icon">H</span>
					<div class="ca-content">
						<img class="ca-sub" src="http://47.100.102.177:8080/app/images/index/e6161a7f05e830a7.png.webp">
					</div>
				</a> </li>
				<li> <a href="/boot/book/index?bookTypeId=8"> <span class="ca-icon">Y</span>
					<div class="ca-content">
						<img class="ca-sub" src="http://47.100.102.177:8080/app/images/index/d2ce1ec0f671c1d5.png.webp">
					</div>
				</a> </li>
				<li> <a href="/boot/book/index?bookTypeId=4"> <span class="ca-icon">N</span>
					<div class="ca-content">
						<img class="ca-sub" src="http://47.100.102.177:8080/app/images/index/44b783211d5b14bb.png.webp">
					</div>
				</a> </li>
			</ul>
		</div>
	</div>
	<div class="con-storey">
		<div class="con-storey-left">
			<div class="dujia">
				<div class="head" id="list">
					<h3 class="title">独家特供</h3>
					<ul class="tab-a" id="tab">
						<li class="active"><span>主打</span></li>
						<li><span>童书</span></li>
						<li><span>文艺</span></li>
						<li><span>生活</span></li>
						<li><span>小说</span></li>
						<li><span>社会</span></li>
						<li><span>人文</span></li>
						<li><span>经管</span></li>
					</ul>
				</div>
				<div class="tab" id="content">
					<div class="content tab_1" title="主打" style="display: block">
						<ul class="list">
							<book:forEach items="${pageInfo3.list}" var="p">
								<li class="line0" onclick="sendBookId(this)">
									<input type="hidden" class="thisBookId" value="${p.bkId}">
									<a class="img"><img src="${p.pictureUrl}"></a>
									<p class="name"><a>${p.title}</a></p>
									<span class="num_logo">云上书屋独家特供</span>
									<p class="price">
											<span class="rob">
												<span class="sign">¥</span>
												<span class="num">${p.price}</span>
											</span>
										<span class="price_r">
												<span class="sign">¥</span>
												<span class="num">${p.price*2}</span>
											</span>
									</p>
									<div class="pop"></div>
								</li>
							</book:forEach>
						</ul>
					</div>
					<div class="content tab_2" type="item" dd_name="童书">

						<ul class="list " id="component_403758__5206_5187__5187" ddt-area="5187" dd_name="商品">
							<book:forEach items="${pageInfo7.list}" var="p">
								<li class="line1"onclick="sendBookId(this)">
									<input type="hidden" class="thisBookId" value="${p.bkId}">
									<a class="img"><img src="${p.pictureUrl}"></a>
									<p class="name"><a>${p.title}</a></p>
									<span class="num_logo">云上书屋独家特供</span>
									<p class="price">
											<span class="rob">
												<span class="sign">¥</span>
												<span class="num">${p.price}</span>
											</span>
										<span class="price_r">
												<span class="sign">¥</span>
												<span class="num">${p.price*2}</span>
											</span>
									</p>
									<div class="pop"></div>
								</li>
							</book:forEach>
						</ul>
					</div>
					<div class="content tab_3" type="item" dd_name="文艺">

						<ul class="list " id="component_403758__5206_5191__5191" ddt-area="5191" dd_name="商品">
							<book:forEach items="${pageInfo1.list}" var="p">
								<li class="line2" onclick="sendBookId(this)">
									<input type="hidden" class="thisBookId" value="${p.bkId}">
									<a class="img"><img src="${p.pictureUrl}"></a>
									<p class="name"><a>${p.title}</a></p>
									<span class="num_logo">云上书屋独家特供</span>
									<p class="price">
											<span class="rob">
												<span class="sign">¥</span>
												<span class="num">${p.price}</span>
											</span>
										<span class="price_r">
												<span class="sign">¥</span>
												<span class="num">${p.price*2}</span>
											</span>
									</p>
									<div class="pop"></div>
								</li>
							</book:forEach>
						</ul>
					</div>
					<div class="content tab_4" type="item" dd_name="小说">

						<ul class="list " id="component_403758__5206_5193__5193" ddt-area="5193" dd_name="商品">
							<book:forEach items="${pageInfo8.list}" var="p">
								<li class="line3" onclick="sendBookId(this)">
									<input type="hidden" class="thisBookId" value="${p.bkId}">
									<a class="img"><img src="${p.pictureUrl}"></a>
									<p class="name"><a>${p.title}</a></p>
									<span class="num_logo">云上书屋独家特供</span>
									<p class="price">
											<span class="rob">
												<span class="sign">¥</span>
												<span class="num">${p.price}</span>
											</span>
										<span class="price_r">
												<span class="sign">¥</span>
												<span class="num">${p.price*2}</span>
											</span>
									</p>
									<div class="pop"></div>
								</li>
							</book:forEach>
						</ul>
					</div>
					<div class="content tab_5" type="item" dd_name="青春励志">

						<ul class="list " id="component_403758__5206_5195__5195" ddt-area="5195" dd_name="商品">
							<book:forEach items="${pageInfo2.list}" var="p">
								<li class="line4"onclick="sendBookId(this)">
									<input type="hidden" class="thisBookId" value="${p.bkId}">
									<a class="img"><img src="${p.pictureUrl}"></a>
									<p class="name"><a>${p.title}</a></p>
									<span class="num_logo">云上书屋独家特供</span>
									<p class="price">
											<span class="rob">
												<span class="sign">¥</span>
												<span class="num">${p.price}</span>
											</span>
										<span class="price_r">
												<span class="sign">¥</span>
												<span class="num">${p.price*2}</span>
											</span>
									</p>
									<div class="pop"></div>
								</li>
							</book:forEach>
						</ul>
					</div>
					<div class="content tab_6" type="item" dd_name="社科">

						<ul class="list " id="component_403758__5206_5197__5197" ddt-area="5197" dd_name="商品">
							<book:forEach items="${pageInfo3.list}" var="p">
								<li class="line5"onclick="sendBookId(this)">
									<input type="hidden" class="thisBookId" value="${p.bkId}">
									<a class="img"><img src="${p.pictureUrl}"></a>
									<p class="name"><a>${p.title}</a></p>
									<span class="num_logo">云上书屋独家特供</span>
									<p class="price">
											<span class="rob">
												<span class="sign">¥</span>
												<span class="num">${p.price}</span>
											</span>
										<span class="price_r">
												<span class="sign">¥</span>
												<span class="num">${p.price*2}</span>
											</span>
									</p>
									<div class="pop"></div>
								</li>
							</book:forEach>
						</ul>
					</div>
					<div class="content tab_7" type="item" dd_name="经管">

						<ul class="list " id="component_403758__5206_5199__5199" ddt-area="5199" dd_name="商品">
							<book:forEach items="${pageInfo6.list}" var="p">
								<li class="line6"onclick="sendBookId(this)">
									<input type="hidden" class="thisBookId" value="${p.bkId}">
									<a class="img"><img src="${p.pictureUrl}"></a>
									<p class="name"><a>${p.title}</a></p>
									<span class="num_logo">云上书屋独家特供</span>
									<p class="price">
											<span class="rob">
												<span class="sign">¥</span>
												<span class="num">${p.price}</span>
											</span>
										<span class="price_r">
												<span class="sign">¥</span>
												<span class="num">${p.price*2}</span>
											</span>
									</p>
									<div class="pop"></div>
								</li>
							</book:forEach>
						</ul>
					</div>
					<div class="content tab_8" type="item" dd_name="生活">
						<ul class="list " id="component_403758__5206_5201__5201" ddt-area="5201" dd_name="商品">
							<book:forEach items="${pageInfo4.list}" var="p">
								<li class="line7"onclick="sendBookId(this)">
									<input type="hidden" class="thisBookId" value="${p.bkId}">
									<a class="img"><img src="${p.pictureUrl}"></a>
									<p class="name"><a>${p.title}</a></p>
									<span class="num_logo">云上书屋独家特供</span>
									<p class="price">
											<span class="rob">
												<span class="sign">¥</span>
												<span class="num">${p.price}</span>
											</span>
										<span class="price_r">
												<span class="sign">¥</span>
												<span class="num">${p.price*2}</span>
											</span>
									</p>
									<div class="pop"></div>
								</li>
							</book:forEach>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--底部-->
	<div class="foot">
		<!-- 多快好省start -->
		<div class="dkhs">
			<ul>
				<li>
					<div class="duo"></div>
					<p>品类齐全，轻松购物</p>
				</li>
				<li>
					<div class="kuai"></div>
					<p>多仓直发，急速配送</p>
				</li>
				<li>
					<div class="hao"></div>
					<p>正平行货，精致服务</p>
				</li>
				<li>
					<div class="sheng"></div>
					<p>天天低价，畅选无忧</p>
				</li>
			</ul>
		</div>
		<!-- 多快好省end -->

		<!-- 结尾start -->
		<div class="jiewei">
			<div class="j1">
				<ul>
					<li><a href="#">关于我们</a></li>
					<li class="line"></li>
					<li><a href="#">关于我们</a></li>
					<li class="line"></li>
					<li><a href="#">关于我们</a></li>
					<li class="line"></li>
					<li><a href="#">关于我们</a></li>
					<li class="line"></li>
					<li><a href="#">关于我们</a></li>
					<li class="line"></li>
					<li><a href="#">关于我们</a></li>
					<li class="line"></li>
					<li><a href="#">关于我们</a></li>
					<li class="line"></li>
					<li><a href="#">关于我们</a></li>
					<li class="line"></li>
					<li><a href="#">关于我们</a></li>
					<li class="line"></li>
					<li><a href="#">关于我们</a></li>
					<li class="line"></li>
					<li><a href="#">关于我们</a></li>
					<li class="line"></li>
					<li><a href="#">English</a></li>
					<li class="line"></li>
					<li><a href="#">Site</a></li>
					<li class="line"></li>
					<li><a href="#">Media & IR</a></li>
					<li class="line"></li>
				</ul>
			</div>
			<div class="j2">
				<p>云上书屋收录的免费书籍作品、频道内容、书友评论、用户上传文字、图片等其他一切内容及在云上书屋所做之广告均属用户个人行为，与本网站无关。
				</p>
			</div>
			<div class="j3">
				<ul>
					<li class="l1"><a href="#"></a></li>
					<li class="l2"><a href="#"></a></li>
					<li class="l3"><a href="#"></a></li>
					<li class="l4"><a href="#"></a></li>
					<li class="l5"><a href="#"></a></li>
					<li class="l6"><a href="#"></a></li>
				</ul>
			</div>
		</div>
		<!-- 结尾end -->
	</div>
</div>

<div class="bg-add" style="position: fixed;">
	<div class="inf">
		<div class="inf-head">
			<h4 style="color: white;display: inline;line-height: 30px;margin-left: 5px;">公告</h4>
			<input type="button" id="close-add" value="×">
		</div>
		<div class="inf-from">
			<table class="mailTable" cellspacing="0" cellpadding="0">
				<tr>
					<td class="column">公告标题</td>
					<td id="ATitle"></td>
				</tr>
				<tr>
					<td class="column">发布时间</td>
					<td id="ATime"></td>
				</tr>
				<tr>
					<td class="column">公告内容</td>
					<td id="AText"></td>
				</tr>
			</table>
		</div>
	</div>
</div>
</body>
<script>
	/*轮播图*/
	var mySwiper = new Swiper('.swiper-container', {
		loop: true, // 循环模式选项
		autoplay: true,
		// 如果需要分页器
		pagination: {
			el: '.swiper-pagination',
		},

		// 如果需要滚动条
		scrollbar: {
			el: '.swiper-scrollbar',
		},
	})
	/*热点信息*/
	var Tags = document.getElementById('NewsTop_tit').getElementsByTagName('p');
	var TagsCnt = document.getElementById('NewsTop_cnt').getElementsByTagName('span');
	var len = Tags.length;
	var flag = 1; //修改默认值
	for (i = 1; i < len; i++) {
		Tags[i].value = i;
		Tags[i].onmouseover = function() {
			changeNav(this.value)
		};
		TagsCnt[i].className = 'undis';
	}
	Tags[flag].className = 'topC1';
	TagsCnt[flag].className = 'dis';

	function changeNav(v) {
		Tags[flag].className = 'topC0';
		TagsCnt[flag].className = 'undis';
		flag = v;
		Tags[v].className = 'topC1';
		TagsCnt[v].className = 'dis';
	}
	/*商品页面*/
	var nav = document.getElementById("tab");
	var navlist = nav.children;
	var con = document.getElementById("content");
	var conlist = con.children;
	for (var i = 0; i < navlist.length; i++) {
		navlist[i].index = i;
		navlist[i].onmouseover = function() {
			for (var m = 0; m < conlist.length; m++) {
				navlist[m].className = "";
				conlist[m].style.display = "none";
			}
			this.className = "active";
			conlist[this.index].style.display = "block";
		}
	}
	$(function (){
		$("#close-add").click(function (){
			$(".bg-add").css("display","none");
		})
	})

	function search_Book(){
		let title=document.getElementById("search").value;
		window.location="/boot/ESsearch?name="+title;
	}

	function sendBookId(obj){
		let bookId = obj.getElementsByClassName("thisBookId")[0].value;
		window.location='/boot/detail/book?bookId='+bookId;
	}

	function lookmsg(obj){
		let i = parseInt(obj.id);
		$(".bg-add").css("display","block");
		let param = "msg="+i;
		let ATitle = document.getElementById("ATitle");
		let ATime = document.getElementById("ATime");
		let AText = document.getElementById("AText");
		$.get("/boot/publicMsg",param,function (res){
			ATitle.innerHTML = res.announcementTitle;
			ATime.innerHTML = res.sendTime;
			AText.innerHTML = res.content;
		})
	}
</script>
</html>
